<template>
    <view>
        <a-drawer v-model:visible="visible" width="600" class="custom-class" style="color: red" title="节点授权"
            placement="right">
            <a-tabs v-model:activeKey="activeKey" @change="reqData()">
                <a-tab-pane v-for="(item, index) in tasks" :key="item.id" :tab="item.name">
                    <AntdZh>
                        <a-row>
                            <a-button v-if="$.hasPerm('flow:assign:create')" type="primary"
                                style="margin-bottom: 10px; width: 80px;">
                                <template #icon><plus-outlined /></template>新增
                            </a-button>
                        </a-row>
                        <a-table :columns="columns" :data-source="assigns" :pagination="false">
                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.dataIndex === 'action'">
                                    <a-row>
                                        <a-col :span="6">
                                            <a-popconfirm title="是否删除该指派 ?" @confirm="handleDelete(record.id)">
                                                <a-tooltip>
                                                    <template #title>删除</template>
                                                    <view v-isAdmin>
                                                        <a-button type="link">
                                                            <DeleteOutlined style="color: #f5222d;" />
                                                        </a-button>
                                                    </view>
                                                </a-tooltip>
                                            </a-popconfirm>
                                        </a-col>
                                    </a-row>
                                </template>
                                <template v-else-if="column.dataIndex === 'assignType'">
                                    <!--执行状态-->
                                    <a-tag color="green" v-if="record.assignType === 'USER'">用户</a-tag>
                                    <a-tag color="orange" v-else-if="record.assignType === 'ROLE'">角色</a-tag>
                                    <a-tag color="red" v-else-if="record.assignType === 'DEPT'">部门</a-tag>
                                </template>
                            </template>
                        </a-table>
                    </AntdZh>
                </a-tab-pane>

            </a-tabs>
        </a-drawer>
    </view>
</template>
<script setup>
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { queryList } from '@/module/flow/api/assign';
import useApp from '@/hooks';
const { $ } = useApp();
const visible = ref(false);
const tasks = ref([])
const activeKey = ref(null)
const flow = ref(null)
const assigns = ref([])
const columns = ref([
    {
        title: '指派对象',
        dataIndex: 'assignType',
    },
    {
        title: '指派对象ID',
        dataIndex: 'assignId',
    },
    {
        title: '操作',
        dataIndex: 'action',
    }
])
$.on('define-assign', r => {
    flow.value = r;
    let flowDefine = JSON.parse(r.flowDefine);
    //console.log(flow)
    var nodeList = flowDefine.nodeList;
    let t = []
    nodeList.forEach(ele => {
        if (ele.nodeType === 'TASK') {
            t.push(ele)
        }
    })
    tasks.value = t;
    // 定义初始选中
    if (!$.isEmpty(t)) {
        tabChange(t[0].id)
    }

    visible.value = true;
})
// 删除
function handleDelete(id) {
    deleteOne(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        reqData()
    })
}
function reqData() {
    queryList({
        flowDefineCode: flow.value.flowDefineCode,
        flowNodeId: activeKey.value,
        pageSize: 100,
        pageNum: 1
    }).then(res => {
        assigns.value = res.content;
    })
}
// 设置
function tabChange(tabKey) {
    console.log(tabKey)
    activeKey.value = tabKey;
    reqData();
}
</script>